import { Component, ElementRef, ViewChild, viewChild } from '@angular/core';   
import * as ace from 'ace-builds';   
import { FileSvcService } from '../../svc/file-svc.service';
import { timeout } from 'rxjs';

@Component({
  selector: 'app-editor-cmp',
  standalone: true,
  imports: [],
  templateUrl: './editor-cmp.component.html',
  styleUrl: './editor-cmp.component.sass'
})
export class EditorCmpComponent {
  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef;

  editor?: ace.Ace.Editor; 
  lastSavedContent = "";

  constructor(public fileSvc:FileSvcService) { }

  ngAfterViewInit(): void {
    this.initEditor();

    // step 1: 监听内容更新数据
    this.fileSvc.content.subscribe((s)=>{
      this.editor?.setValue(s);
      this.lastSavedContent = s;
      this.editor?.clearSelection();
    });
  }

  save() { 
  
    // step 1: 获取当前内容
    let content = this.editor?.getValue()??"";
    
    // step 2: 保存当前内容到文件
     this.fileSvc.save(content).then((s)=>{

      if(s[0]){
        // step 3: 保存成功 
        this.lastSavedContent = content;
      }else{
        // step 4: 保存失败 
      }
     });
  
  }

  initEditor(): void { 
 
    this.loadModule();
    
    // Create Ace Editor instance
    this.editor = ace.edit(this.editorContainer.nativeElement);
    const wrapMode = localStorage.getItem("editor.WrapMode") == "1";
    if(wrapMode){
     this.editor.session.setUseWrapMode(wrapMode);
    }
    // Set editor options 
     this.editor.setTheme('ace/theme/chrome');   

    // Optional: Set default content
    this.editor.setValue('');

    // Set up an interval to check for changes every 10 seconds
    setInterval(() => {
      const currentContent = this.editor?.getValue() ?? "";
      if (currentContent !== this.lastSavedContent) {
      this.save();
      }
    }, 3000);
  }
  loadModule() {  
   
    var defaultChineseMessages = {
      "autocomplete.popup.aria-roledescription": "自动完成建议",
      "autocomplete.popup.aria-label": "自动完成建议",
      "autocomplete.popup.item.aria-roledescription": "项",
      "autocomplete.loading": "加载中...",
      "editor.scroller.aria-roledescription": "编辑器",
      "editor.scroller.aria-label": "编辑器内容，按 Enter 开始编辑，按 Escape 退出",
      "editor.gutter.aria-roledescription": "编辑器",
      "editor.gutter.aria-label": "编辑器边距，按 Enter 使用箭头键与控件交互，按 Escape 退出",
      "error-marker.good-state": "看起来不错！",
      "prompt.recently-used": "最近使用",
      "prompt.other-commands": "其他命令",
      "prompt.no-matching-commands": "没有匹配的命令",
      "search-box.find.placeholder": "查找",
      "search-box.find-all.text": "全部",
      "search-box.replace.placeholder": "替换为",
      "search-box.replace-next.text": "替换",
      "search-box.replace-all.text": "全部替换",
      "search-box.toggle-replace.title": "切换替换模式",
      "search-box.toggle-regexp.title": "正则表达式搜索",
      "search-box.toggle-case.title": "区分大小写搜索",
      "search-box.toggle-whole-word.title": "全字匹配搜索",
      "search-box.toggle-in-selection.title": "在选定内容中搜索",
      "search-box.search-counter": "$0 of $1",
      "text-input.aria-roledescription": "编辑器",
      "text-input.aria-label": "光标在第 $0 行",
      "gutter.code-folding.range.aria-label": "切换代码折叠，第 $0 行到第 $1 行",
      "gutter.code-folding.closed.aria-label": "切换代码折叠，第 $0 行到第 $1 行",
      "gutter.code-folding.open.aria-label": "切换代码折叠，第 $0 行",
      "gutter.code-folding.closed.title": "展开代码",
      "gutter.code-folding.open.title": "折叠代码",
      "gutter.annotation.aria-label.error": "错误，查看第 $0 行的注释",
      "gutter.annotation.aria-label.warning": "警告，查看第 $0 行的注释",
      "gutter.annotation.aria-label.info": "信息，查看第 $0 行的注释",
      "inline-fold.closed.title": "展开代码",
      "gutter-tooltip.aria-label.error.singular": "错误",
      "gutter-tooltip.aria-label.error.plural": "错误",
      "gutter-tooltip.aria-label.warning.singular": "警告",
      "gutter-tooltip.aria-label.warning.plural": "警告",
      "gutter-tooltip.aria-label.info.singular": "信息消息",
      "gutter-tooltip.aria-label.info.plural": "信息消息"
  };
     (ace.config as any).setMessages(defaultChineseMessages)
    ace.config.setModuleUrl('ace/theme/chrome', ace.require('file-loader?esModule=false!./src-noconflict/theme-chrome.js'));
    ace.config.setModuleUrl('ace/theme/monokai', ace.require('file-loader?esModule=false!./src-noconflict/theme-monokai.js'));
  }


} 